<template>
	<!-- 	{
			msgId:1,
			sender:1,
			sendYear:'2020',
			sendDay:'07-02',
			sendTime:"10:45",
			msgType:ImEnum.ImMsgTypeEnum.text,
			count:21,//视频或音频的长度
			msgStr:'里面有2个域名的申请和Niginx的配置',
			url:'https://cdn.quasar.dev/img/mountains.jpg'
		}, -->
	<view class=" ImMsgBox " id="ImMsgBox">
		<scroll-view class="scroll-container  animation-scale-down " scroll-y scroll-with-animation enable-back-to-top>
			<view v-for="(item,index) in msgList[chatId]" :key="index" class="tui-flex margin-top-20 " :class="item.sender === loginInfo.id ? 'tui-align-right' : 'tui-align-left'">
				<view class="msg-ava margin-left" v-if="item.sender !== loginInfo.id">
					<view class=" text-cut text-20">我从小怕过谁</view>
					<image src="https://cdn.quasar.dev/img/avatar.png" class="tui-msg-pic " mode="widthFix"></image>
				</view>
				<!-- 	ImMsgTypeEnum = {//消息类型-不可修改
				text:'text',
				img:'img',
				video:'video',
				voice:'voice'
			} -->
				<view
					v-if="item.msgType === 'text' || item.msgType === 'audio'"
					class="tui-center tui-chatbox margin-top-20"
					:class="item.sender === loginInfo.id ? ' margin-right tui-chatbox-right' : 'tui-chatbox-left '"
				>
					<p v-if="item.msgType === 'text'" v-html="renderTxt(item.msgStr)"></p>

					<!-- 音频类型消息 -->
					<view v-else>
						<im-media :mediaType="item.msgType" :src="item.url" :count="item.count" :position="item.sender === loginInfo.id ? 'right' : 'left'"></im-media>
					</view>
				</view>
				<view v-else class="tui-chatbox margin-top-20  " :class="item.sender === loginInfo.id ? 'tui-align-right' : 'tui-align-left'">
					<!-- 图片类型消息 -->
					<image @tap="previewwImage(item.url)" class=" msg-img round_view" v-if="item.msgType === 'img'" mode="aspectFill" :src="item.url"></image>
					<!-- 视频类型消息 -->
					<view v-if="item.msgType === 'video'">
						<im-media :mediaType="item.msgType" :src="item.url" :count="item.count" :position="item.sender === loginInfo.id ? 'right' : 'left'"></im-media>
					</view>
				</view>

				<view class="msg-ava " v-if="item.sender == loginInfo.id"><image src="https://cdn.quasar.dev/img/avatar.png" class="tui-msg-pic " mode="widthFix"></image></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import ImEnum from '../../../sdk/enums/index.js';
import emoji from '../im-emoji/im-emoji.js';
export default {
	name: 'ImMsgBox',
	props: {
		chatType: {
			//ImEnum.USER_TYPE 聊天类型USER:0,GROUP:1,	CHAT_ROOM:2
			type: [Number, String],
			default: 1
		},
		chatId: {
			type: [Number, String],
			default: 'group-100'
		}
	},
	computed: {
		msgList() {
			return this.$store.getters.msgListGetter;
		}
	},
	data() {
		return {
			/**
			 * 当前登录人信息
			 */
			loginInfo: {
				id: '1',
				name: '波多野溪子',
				nickName: '波多野溪子',
				avatar: 'https://cdn.quasar.dev/img/avatar.png',
				lastChatTime: '10:22'
			}
		};
	},
	methods: {
		renderTxt(txt = '') {
			const rnTxt = [];
			let match = null;
			const regex = /(\[.*?\])/g;
			let start = 0;
			let index = 0;
			while ((match = regex.exec(txt))) {
				index = match.index;
				if (index > start) {
					rnTxt.push(txt.substring(start, index));
				}
				if (match[1] in emoji.obj) {
					const v = emoji.obj[match[1]];
					rnTxt.push(this.customEmoji(v));
				} else {
					rnTxt.push(match[1]);
				}
				start = index + match[1].length;
			}
			rnTxt.push(txt.substring(start, txt.length));
			const text = rnTxt
				.toString()
				.replace(/,/g, '')
				.replace(/base64/g, 'base64,');
			return text;
		},
		customEmoji(value) {
			return '<image  src="' + `/static/${value}` + '" class="im-emoji-img" mode="widthFix"/>';
		},
		commitScorll() {
			setTimeout(() => {
				uni.pageScrollTo({
					scrollTop: 999999999
				});
			}, 200);
		},
		previewwImage(url) {
			uni.previewImage({
				urls: [url]
			});
		}
	},
	created() {
		//获取当前登录人信息
		this.loginInfo = this.BenderSdk.getLoginUserInfo().loginUserInfo;
		this.commitScorll();
	},
	watch: {
		//监控数据变更从而 消息框下滑到最下面
		msgList: function(val) {
			this.commitScorll();
		}
	}
};
</script>

<style scoped>
.msg-ava {
	max-height: 100rpx;
	max-width: 100rpx;
}
.im-emoji-img {
	height: 50rpx;
	width: 50rpx;
}
.scroll-container {
	height: calc(100vh  - 100rpx - env(safe-area-inset-bottom) - var(--status-bar-height));
}
.ImMsgBox{
	margin-top: 10rpx;
}
</style>
